<template>
  <div style="position: relative;width: 100%;height: 870px;">
    <div id="container" style="width:100%; height:100%">
      <div class="info" ref="info">
        <div class="info-title">
          <span>{{ this.information.name }}</span>&nbsp;
          <span
            style="color:red"
            v-if="!this.information.open"
          >价格：{{ this.information.price }}/晚</span>
        </div>
        <div class="info-item">
          <span class="info-content">{{ this.information.vehicleNo }}</span>
        </div>
        <div class="info-item">
          地址：
          <span>{{ this.information.position }}</span>
        </div>
        <div class="info-item">
          交通方式：
          <span>{{ this.information.traffic }}</span>
        </div>
        <div class="info-item" v-if="this.information.open">
          开放时间：
          <span>{{ this.information.open }}</span>
        </div>
        <div v-if="!this.information.open">
          <label for>酒店图片：</label>
          <viewer :images="information.src[0]">
            <img width="128" height="80" :src="information.src[0]" alt="无照片" />
          </viewer>
        </div>
        <div v-if="this.information.open">
          <label for>景区图片：</label>
          <viewer :images="information.src[0]">
            <img width="128" height="80" :src="information.src[0]" alt="无照片" />
          </viewer>
        </div>
        <el-button
          style="position:absolute;right:80px;bottom:85px;"
          type="text"
          @click="look"
          size="large"
        >查看详情</el-button>
        <div style="margin:12px 0 7px 0;height:1px;background:rgba(223,229,244,1);"></div>
      </div>
    </div>
    <div id="panel"></div>
    <div id="myPageTop">
      <input v-model="input" id="tipinput" />
      <button @click="searchAddress">更多搜索</button>
    </div>

    <div class="list-panel">
      <transition name="panel">
        <list-info-panel v-show="showlistInfoPanel" @detail="detailClick"></list-info-panel>
      </transition>
      <span class="toggle-btn" :class="{ 'toggle-show': !showlistInfoPanel }" @click="togglePanel">
        <i class="el-icon-arrow-right"></i>
      </span>
    </div>

    <el-dialog title="天气" :visible.sync="dialogVisible" width="60%">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import AMap from 'AMap'
import ListInfoPanel from './list-info-panel/list-info-panel'
let map, placeSearch
export default {
  // name: 'AMap',
  data() {
    return {
      input: '',
      weather: {},
      showlistInfoPanel: true,
      information: { src: [] },
      dialogVisible: false
    }
  },
  mounted: function() {
    this.AMapInit()
  },
  computed: {
    // src() {
    //   return this.information.src[0]
    // }
  },
  methods: {
    look() {
      // this.dialogVisible = true
      if (this.information.open) {
        this.$router.push({
          name: 'sceneryDetail',
          params: { id: this.information.id }
        })
      } else {
        this.$router.push({
          name: 'hotelDetail',
          params: { id: this.information.id }
        })
      }
    },
    detailClick(row) {
      // console.log(row)
      if (this.marker) {
        map.remove(this.marker)
      }
      this.information = row
      // console.log(this.information.src[0])
      this.AMapInit([row.longitude, row.latitude])
      this.mapMarker([row.longitude, row.latitude])
    },
    onMarkerClick(e) {
      AMap.plugin('AMap.Weather', function() {
        // 创建天气查询实例
        var weather = new AMap.Weather()

        // 执行实时天气信息查询
        weather.getLive('绍兴市', function(err, data) {
          console.log(err, data)
        })
      })
      // console.log(this.information)
      const infoWindow = new AMap.AdvancedInfoWindow({
        // 创建信息窗体
        // isCustom: false, // 使用自定义窗体
        content: this.$refs.info, // 信息窗体的内容可以是任意html片段
        offset: new AMap.Pixel(16, -45)
      })
      infoWindow.open(map, [
        e.target.getPosition().lng,
        e.target.getPosition().lat
      ]) // 打开信息窗体
      // e.target就是被点击的Marker
      console.log(
        '经度：' + e.target.getPosition().lng,
        '纬度：' + e.target.getPosition().lat
      )
    },
    mapMarker(arriveCoor = [120.20113, 30.200703]) {
      this.marker = new AMap.Marker({
        icon: '', // 图片ip
        imageSize: '20px',
        position: arriveCoor,
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: false
        // cursor: 'move',
        // // 设置拖拽效果
        // raiseOnDrag: true
      })
      map.add(this.marker)
      this.marker.on('click', this.onMarkerClick)
    },
    AMapInit(arriveCoor = [120.868122, 30.033121]) {
      map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 15,
        viewMode: '3D',
        pinch: 45,
        center: arriveCoor
      })

      AMap.plugin(['AMap.ControlBar'], function() {
        // 添加 3D 罗盘控制
        map.addControl(
          new AMap.ControlBar({
            position: {
              left: '10px',
              top: '760px'
            },
            showControlButton: true // 是否显示倾斜、旋转按钮。默认为 true
          })
        )
      })

      AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
          buttonOffset: new AMap.Pixel(10, 20),
          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
          zoomToAccuracy: true,
          //  定位按钮的排放位置,  RB表示右下
          buttonPosition: 'RB'
        })
        map.addControl(geolocation)
        // geolocation.getCurrentPosition()
        // AMap.event.addListener(geolocation, 'complete', onComplete)
        // AMap.event.addListener(geolocation, 'error', onError)

        // function onComplete(data) {
        //   // data是具体的定位信息
        //   console.log(data)
        // }

        // function onError(data) {
        //   // 定位出错
        //   console.log(data)
        // }
      })
      // AMap.plugin('AMap.Weather', function() {
      //   // 创建天气查询实例
      //   var weather = new AMap.Weather()

      //   // 执行实时天气信息查询
      //   weather.getLive('绍兴市', function(err, data) {
      //     console.log(err, data)
      //   })
      // })
      AMap.plugin(['AMap.PlaceSearch'], function() {
        // 构造地点查询类
        placeSearch = new AMap.PlaceSearch({
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          citylimit: false, // 是否强制限制在设置的城市内搜索
          map: map, // 展现结果的地图实例
          panel: 'panel', // 结果列表将在此容器中进行展示。
          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          renderStyle: 'default'
        })
      })
      // 添加列表点选监听事件
      // AMap.event.addListener(placeSearch, 'selectChanged', this.selectAddress)
    },
    searchAddress() {
      placeSearch.search(this.input)
    },
    selectAddress(e) {
      // 这里获得点选地点的经纬度
      const location = e.selected.data.location
      console.log('lng', location.lng)
      console.log('lat', location.lat)
      // Do Something
    },
    togglePanel() {
      this.showlistInfoPanel = !this.showlistInfoPanel
    }
  },
  components: {
    ListInfoPanel
  }
}
</script>
<style lang="scss" scoped>
img {
  cursor: pointer;
  margin-top: 10px;
}
html,
body {
  height: 100%;
  width: 100%;
}
.info {
  width: 335px;
  // height: 300px;
  padding: 12px 5px 0px 20px;
  // background: rgba(255, 255, 255, 0.9);
  // box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.15);
  .info-item {
    margin: 12px 0px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(99, 101, 105, 1);
    line-height: 14px;
    .info-content {
      color: rgba(42, 44, 47, 1);
    }
  }
  .img-group {
    display: inline-block;
    width: 56px;
    height: 60px;
    text-align: center;
    margin: 6px 12px 0px 0;
  }
  .info-title {
    margin-top: 18px;
    height: 16px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(42, 44, 47, 1);
    line-height: 16px;
    font-weight: bold;
  }

  .content-group {
    display: inline-block;
    margin-right: 12px;
    width: 75px;
    height: 60px;
    text-align: center;
    .pm {
      margin: 10px;
    }
    .strong {
      font-size: 18px;
      font-weight: 500;
      display: inline-block;
    }
  }
}
#myPageTop {
  background-color: #ddf;
  color: #333;
  border: 1px solid silver;
  box-shadow: 3px 4px 3px 0px silver;
  position: absolute;
  top: 20px;
  left: 50px;
  border-radius: 5px;
  overflow: hidden;
  line-height: 20px;
}
#myPageTop input[type='text'] {
  height: 25px;
  border: 0;
  padding-left: 5px;
  width: 280px;
  border-radius: 3px;
  outline: none;
}
#panel {
  position: absolute;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 80px;
  left: 50px;
  width: 280px;
}
.list-panel {
  position: absolute;
  top: 20px;
  right: 0px;
  z-index: 1;
  .toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    padding: 7px 0;
    font-size: 28px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    // background-color: #4b79fe;
    transition: 0.5s;
    &.toggle-show {
      transform: rotateY(180deg);
    }
  }
  .panel-enter-active,
  .panel-leave-active {
    transition: 0.5s;
  }
  .panel-enter,
  .panel-leave-to {
    transform: translateX(100%);
  }
}
</style>
